<template>
    <breadCrumb :item="item"></breadCrumb>
    <div class="table-wrapped">
        <div class="table-top">
            <div class="table-header">
                <div class="search-wrapped">
                    <el-input class="w-50 m-2" size="large" placeholder="输入账号进行搜索" v-model="search"
                        :prefix-icon="Search" clearable @change="searchAdmin" @clear="getFirstPage" />
                </div>
                <div class="button-wrapped">
                    <el-button type="primary" @click="openCreate">添加超级管理员</el-button>
                </div>
            </div>
            <div class="table-content">
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="account" label="账号" />
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="sex" label="性别" />
                    <el-table-column prop="identity" label="身份" />
                    <el-table-column prop="department" label="部门" />
                    <el-table-column prop="email" label="邮箱" />
                    <el-table-column prop="update_time" label="更新时间">
                        <template #default="{ row }">
                            <div>{{ row.update_time?.slice(0, 10) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="{ row }">
                            <div>
                                <el-button type="success" @click="openEdit(row)">编辑</el-button>
                                <el-button type="danger" @click="openDelete(row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="table-footer">
            <el-pagination :page-size="paginationData.pageSize" :pager-count="7" layout="prev, pager, next"
                :total="paginationData.total" :current-page="paginationData.currentPage"
                :page-count="paginationData.pageCount" @current-change="currentChange" />
        </div>
    </div>
    <createA ref="create"></createA>
    <Edit ref="edit"></Edit>
    <Delete ref="deleteA"></Delete>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import breadCrumb from '@/components/breadCrumb.vue'
import createA from '../component/create_admin.vue'
import Edit from '../component/edit_admin.vue'
import { bus } from '@/utils/mitt.js'
import { searchUser, getUserLength, getUserListByPage } from '@/api/userInfo.js'
import Delete from '../component/delete_admin.vue'

// 面包屑
const item = ref({
    first: '用户管理',
    second: '超级管理员'
})
// 搜索
const search = ref('')
// 表格内容
const tableData = ref()
//新增管理员弹窗
const create = ref()
// 打开新增管理员弹窗
const openCreate = () => {
    create.value.open()
    bus.emit('createId', 1)
}
// 编辑管理员弹窗
const edit = ref()
// 打开编辑管理员弹窗
const openEdit = (row) => {
    edit.value.open()
    bus.emit('editId', row.ID)
}
//降级管理员弹窗
const deleteA = ref()
//打开降级管理员弹窗
const openDelete = (row) => {
    deleteA.value.open()
    bus.emit('deleteId', row.ID)
}
//搜索超级管理员
const searchAdmin = async () => {
    const res = await searchUser(search.value, ['超级管理员','院领导'])
    tableData.value = res.data
    paginationData.total = 1
    paginationData.pageCount = 1
    paginationData.currentPage = 1
}
//分页数据
const paginationData = reactive({
    // 当前页
    currentPage: 1,
    // 每页显示多少条
    pageSize: 10,
    // 总条数
    total: null,
    // 总页数
    pageCount: null
})
//获取当前页面用户总数
const getUserLengthData = async () => {
    const res = await getUserLength(['超级管理员','院领导'])
    paginationData.total = res.data[0].count
    paginationData.pageCount = Math.ceil(res.data[0].count / paginationData.pageSize)
}
getUserLengthData()
//获取第一页的数据
const getFirstPage = async () => {
    const res = await getUserListByPage(['超级管理员','院领导'], 1)
    tableData.value = res.data.data
    paginationData.currentPage = 1
    getUserLengthData()
}
getFirstPage()
//页数改变
const currentChange = async (val) => {
    paginationData.currentPage = val
    const res = await getUserListByPage(['超级管理员','院领导'], val)
    tableData.value = res.data.data
}
//
//对超级管理员操作后更新列表
bus.on('offDialog',async (id) => {
    const current = paginationData.currentPage
    if (id == 2) {
        const res = await getUserListByPage(['超级管理员','院领导'], paginationData.currentPage)
        tableData.value = res.data.data
        if (tableData.value.length == 0) {
            paginationData.currentPage = current - 1
            const res = await getUserListByPage(['超级管理员','院领导'], paginationData.currentPage)
            tableData.value = res.data.data
            getUserLengthData()
        }
    }
})
</script>
<style lang="scss" scoped></style>